<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>flex商品列表练习</title>
		<style>
			/* CSS样式重置 */
			* {
				margin: 0;
				padding: 0;
			}
			ul {
				list-style: none;
			}
			a {
				text-decoration: none;
			}
			/* 版心 */
			.center {
				width: 1000px;
				margin: 0 auto;
			}
			body {
				/* 给背景一个很浅很浅的灰色，这样不像白色那么刺眼 */
				background-color: #f5f5f5;
			}
			.top .area {
				height: 40px;
				display: flex;
				justify-content: space-between; /* 主轴两端对齐 */
				align-items: center; /* 交叉轴居中对齐 */
				background-image: linear-gradient(#f5f4f5,#e6e6e5);
				box-shadow: 0 2px 5px #aaa;
				padding: 0 5px;
			}
			.top .area button {
				height: 30px;
				border-radius: 5px;
				padding: 0 10px;
				border: 0;
				color:#fff;
			}
			.top .area button:first-child {
				background-color: #ffaf0f;
			}
			.top .area button:last-child {
				background-color: #bbb;
			}
			/* 第二层 */
			.main ul {
				background-color: #fff;
				height: 620px;
				/* ul当做父容器 */
				display: flex;
				flex-wrap: wrap; /* 要换行 */
				/* 主轴方向 剩余空间均分 公平对齐 */
				justify-content: space-evenly;
				/* 多行内容在交叉轴方向上 公平对齐 剩余空间均分 */
				align-content: space-evenly;
			}
			.main ul li {
				height: 280px;
				width: 230px;
				border: 1px solid #999;
			}
			.main ul li img {
				display: block;
				width: 100%;
			}
			.main ul li a {
				font-size: 12px;
				color: #000;
				/* 为了加上下间距，可以变块级元素 */
				display: block;
				margin: 5px 0;
				white-space: nowrap; /*强制不换行*/
				overflow: hidden; /*溢出部分隐藏*/
				text-overflow: ellipsis; /*将超出的部分变为省略号*/
			}
		</style>
	</head>
	<body>
		<!-- 第一层 -->
		<div class="top">
			<div class="center">
				<div class="area">
					<button>管理收藏夹</button>
					<button>清空失效商品</button>
				</div>
			</div>
		</div>
		<!-- 第二层 -->
		<div class="main">
			<div class="center">
				<ul>
					<li>
						<img src="img/shoplist/shop1.jpg">
						<a href="#">戴尔（DELL）MS116 鼠标有线 商务办公经典对称 有线鼠标</a>
						<h4>￥ 19.90 </h4>
					</li>
					<li>
						<img src="img/shoplist/shop2.jpg">
						<a href="#">华为笔记本电脑MateBook D 14 SE版 14英寸 11代酷睿 i5</a>
						<h4>￥ 3899.00 </h4>
					</li>
					<li>
						<img src="img/shoplist/shop3.jpg">
						<a href="#">雷柏（Rapoo） V500PRO 机械键盘 有线键盘 游戏键盘 104键混光键盘</a>
						<h4>￥ 109.00</h4>
					</li>
					<li>
						<img src="img/shoplist/shop4.jpg">
						<a href="#">先马（SAMA）平头哥M1电竞版 Mini小机箱 支持MATX主板240水冷</a>
						<h4>￥ 179.00</h4>
					</li>
					<li>
						<img src="img/shoplist/shop5.jpg">
						<a href="#">英特尔i5 10400F/10600KF i511400F</a>
						<h4>￥ 1299.00</h4>
					</li>
					<li>
						<img src="img/shoplist/shop6.jpg">
						<a href="#">金士顿（Kingston）32GB USB3.2 Gen 1 U盘 DTX</a>
						<h4>￥ 27.90</h4>
					</li>
					<li>
						<img src="img/shoplist/shop7.jpg">
						<a href="#">罗技（Logitech）C270高清网络摄像头 网课 摄像头家用 视频通话 带麦克风台式机电脑摄像头</a>
						<h4>￥119.00</h4>
					</li>
					<li>
						<img src="img/shoplist/shop8.jpg">
						<a href="#">微软 Xbox Elite 无线控制器2代 二代精英手柄 无线手柄 蓝牙手柄 自定义设置/按键 Type C接口</a>
						<h4>￥ 1398.00</h4>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>